// 1. 引入sme-router
import SMERouter from 'sme-router'

// 引入模板
// 返回的index是一个函数,index函数调用的返回值就是模板中html结构字符串
// import index from './views/index'
// import login from './views/login'
import index from '@v/index'
import login from '@v/login'
// console.log(index())

// 2. 创建router对象
// root 是index.html中写死的一个节点的id名
// 注意: smeRouter默认是hash模式,root后面添加html5则变为history模式
// hash模式改变的是hash值,路径没有变,路径一直是/
// history模式改变的就是路径
const router = new SMERouter('root', 'html5')
// 把router对象暴露到全局
window.router = router

// 3. 配置前端路由规则
// router.route('/路径',回调函数) //回调函数中返回对应要渲染的视图
router.route('/index', function (req, res, next) {
  console.log(res.subRoute()) //<div id="__sub-route-view"></div> 这是标签专门用来渲染二级路由的内容. 需要在一级路由的html结构中渲染才会生效
  // next是一个函数,用来处理当前路由下面的子路由的,当路径为/index/advList的时候,只有写了这个next,才会展示一级路由
  next(
    index({
      // 把渲染二级路由的标签,传递到模板中,注意:需要在模板中把这个标签渲染出来
      subRoute: res.subRoute(),
    })
  )
})

// 配置二级路由的路由规则
router.route('/index/adminList', function (req, res) {
  res.render('管理员列表')
})
router.route('/index/advList', function (req, res) {
  res.render('广告列表')
})
router.route('/login', function (req, res) {
  res.render(login())
})
router.route('/404', function (req, res) {
  res.render('找不到您想要的页面')
})
// 注意: 启动项目,打开的路径是/.我们为了方便,希望直接打开index页面
// router.route('/', function (req, res) {
//   console.log('进入/了')
//   res.redirect('/index')
// })
// 以上的路由都匹配不上的时候,就会执行*.重定向到404
router.route('*', function (req, res) {
  // 重定向把浏览器地址栏的路径改成404
  res.redirect('/index')
})
